<template>
  <div class="region-selector">
    <div
      class="overlay"
      @mousedown="startSelection"
      @mouseup="endSelection"
      @mousemove="updateSelection"
      @keydown.esc="cancelSelection"
    >
      <div
        class="selection-box"
        v-if="isSelecting"
        :style="{
          left: `${selection.x}px`,
          top: `${selection.y}px`,
          width: `${selection.width}px`,
          height: `${selection.height}px`
        }"
      >
        <div class="selection-info">{{ selection.width }} × {{ selection.height }}</div>
      </div>

      <div class="instructions">
        <p>拖动鼠标选择截图区域，按ESC取消</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 选择状态
const isSelecting = ref(false)
const selection = ref({
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  startX: 0,
  startY: 0
})

// 开始选择区域
const startSelection = (e) => {
  if (e.button !== 0) return // 只响应左键点击

  isSelecting.value = true
  selection.value.startX = e.clientX
  selection.value.startY = e.clientY
  selection.value.x = e.clientX
  selection.value.y = e.clientY
  selection.value.width = 0
  selection.value.height = 0
}

// 更新选择区域
const updateSelection = (e) => {
  if (!isSelecting.value) return

  const currentX = e.clientX
  const currentY = e.clientY

  // 计算选择区域
  selection.value.x = Math.min(selection.value.startX, currentX)
  selection.value.y = Math.min(selection.value.startY, currentY)
  selection.value.width = Math.abs(currentX - selection.value.startX)
  selection.value.height = Math.abs(currentY - selection.value.startY)
}

// 结束选择区域
const endSelection = () => {
  if (!isSelecting.value) return

  // 最小选择区域验证
  if (selection.value.width > 10 && selection.value.height > 10) {
    // 发送选择的区域
    window.electronScreenCapture.sendRegionSelected({
      x: selection.value.x,
      y: selection.value.y,
      width: selection.value.width,
      height: selection.value.height
    })
  } else {
    // 区域太小，取消选择
    cancelSelection()
  }

  isSelecting.value = false
}

// 取消选择
const cancelSelection = () => {
  isSelecting.value = false
  window.electronScreenCapture.sendRegionCanceled()
}

// 初始化时设置焦点，以便捕获ESC键
window.addEventListener('load', () => {
  document.body.focus()
})
</script>

<style scoped lang="scss">
.region-selector {
  width: 100vw;
  height: 100vh;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: crosshair;
}

.selection-box {
  position: absolute;
  border: 2px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.selection-info {
  background-color: #2196f3;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  font-family: Arial, sans-serif;
}

.instructions {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}
</style>
